<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios"
const route = useRoute();
import qs from 'qs'
import UserCardList from "../components/UserCardList.vue";

// 模拟数据
// const mockUser = {
//   id: 2502,
//   username: "rose",
//   userAccount: "admin",
//   avatarUrl: "https://www.mianshiya.com/_next/image?url=%2Flogo.png&w=32&q=75",
//   gender: 0,
//   profile: "双非牛马研究生，会打篮球，但是不会唱跳和rap！",
//   phone: "18856957326",
//   email: "rose@qq.com",
//   userRole: 0,
//   planetCode: "0001",
//   tags: ["java", "python", "大一","编程"],
//   createTime: new Date()
// }
const loading = ref(true);
const userList = ref([])

const {tags} = route.query;
// const tagsArray = Array.isArray(rawTags) ? rawTags : [rawTags];
onMounted(async () => {
  loading.value = true;
  const userListData = await myAxios.get('user/search/tags', {
    // ✅ 这里用 params
    params: {
      tagNameList: tags// 自动转成 tags=java&tags=vue&tags=spring
    },
    paramsSerializer: {
      serialize: params => qs.stringify(params, {indices: false})
    }
    // ✅ 这一步是关键，用 qs 格式化数组（Axios 默认不是 repeat 格式
  })
      .then(function (res) {
        if (res.data && res.data.length > 0) {
          return res.data;
        }
        console.log('搜索成功:', res)
        // userList.value = res.data.date;
      })
      .catch(function (err) {
        console.error('请求失败:', err)
      })
  if (userListData) {
    userListData.forEach((user) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
        console.log(user.tags);
      }
    })
    userList.value = userListData
  }
  loading.value = false;
})


</script>

<template>
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空"/>
  <user-card-list :user-list="userList" :loading="loading"/>


<!--  优化用户使用体验-->


</template>

<style scoped>

</style>